<template>
  <div class="showBlock">
    <div>
      <p class="address">
        {{ state.address }} <span>{{ state.city }}</span>
      </p>
      <p class="temperature">
        {{ state.temperature }}℃<span class="weather"
      >{{ state.weather }}
          <span><i :class="getIcon" class="mainWeather iconfont"></i></span>
        </span>
      </p>
    </div>
    <div class="other">
      <div class="wind">
        <div class="wid-floow">
          <i class="iconfont icon-fengxiang"></i>
          风向: <span>{{ state.winddirection }} </span>
        </div>
        <div class="wind-power">
          <i class="iconfont icon-fengli"></i>
          风力:<span>{{ state.windpower }}级</span>
        </div>
      </div>
      <div class="humidity">
        <i class="iconfont icon-shidu"></i> 湿度:<span>{{
          state.humidity
        }}</span>
      </div>
      <div id="reporttime">
        发布时间:<span>{{ state.reporttime }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, reactive, watchEffect} from "vue";
import axios from "axios";

const state = reactive({
  input: "",
  city: "",
  adcode: "",
  address: "",
  ipAddress: "",
  ipAdCode: "",
  weather: "",
  temperature: "",
  winddirection: "",
  windpower: "",
  humidity: "",
  reporttime: "",
  icon: true,
});

const getIcon = computed(() => {
  state.icon = false;
  if (state.weather === "晴") {
    return "icon-qingtian";
  } else if (state.weather === "多云") {
    return " icon-duoyun";
  } else if (state.weather === "阴") {
    return "icon-yintian";
  } else if (state.weather.includes("雨")) {
    return "icon-dayu-baoyu";
  } else if (state.weather.includes("雪")) {
    return "icon-daxue-baoxue";
  }
  state.icon = true;
});

const getWeather = (adcode) => {
  axios
      .get("https://restapi.amap.com/v3/weather/weatherInfo?parameters", {
        params: {
          key: "9c258b94669138b371320ffeb8d820a9",
          city: adcode,
          extensions: "base",
        },
      })
      .then((response) => {
        let lives = response.data.lives[0];
        state.weather = lives.weather;
        state.temperature = lives.temperature;
        state.winddirection = lives.winddirection;
        state.windpower = lives.windpower;
        state.humidity = lives.humidity;
        state.reporttime = lives.reporttime;
        state.address = lives.city;

        localStorage.setItem("adcode", adcode);
      })
      .catch((error) => {
      });
};

const getIp = () => {
  axios
      .get("https://restapi.amap.com/v3/ip?parameters", {
        params: {
          key: "9c258b94669138b371320ffeb8d820a9",
        },
      })
      .then((response) => {
        state.ipAddress = `${response.data.province}${response.data.city}`;
        state.ipAdCode = response.data.adcode;
        state.city = response.data.city;
        if (!localStorage.getItem("adcode")) {
          state.adcode = response.data.adcode;
        }
      });
};

// 监听 adcode 的变化
onMounted(() => {
  if (localStorage.getItem("adcode")) {
    state.adcode = localStorage.getItem("adcode");
  }
  getIp();
});

watchEffect(() => {
  if (state.adcode) {
    getWeather(state.adcode);
  }
});
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

.showBlock {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 40px;
  background-image: url("@/assets/image/wheather.jpg");
  color: #fff;
  padding: 15px;
  border-radius: 10px;
}

.ipAddress {
  margin-top: 10px;
}

.temperature {
  font-size: 50px;
}

.weather {
  margin-left: 10px;
  font-size: 35px;
}

.address {
  font-size: 20px;
}

.address span {
  font-size: 16px;
  color: #a8abb2;
}

.other span {
  color: #f9f9f9;
  margin: 0 10px;
  font-size: 13px;
}

.wind {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 14px;
}

.humidity {
  margin: 20px 0;
  font-size: 14px;
}

#reporttime {
  margin-top: 10px;
  font-size: 14px;
}
</style>
